<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Point</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="logo">
        <img src="./images/logo.png" alt="">
    </div>
    <nav>
        <ul>
            <li><a href="">home</a></li>
            <li><a href="">about</a></li>
            <li><a href="">services</a></li>
            <li><a href="">products</a></li>
            <li><a href="">contacts</a></li>
        </ul>
    </nav>
    <main class="clearfix">
        <!-- 轮播 -->
        <div class="container">
            <div class="pic">
                <img src="./images/slide-1.png" alt="">
                <img src="./images/slide-2.png" alt="">
                <img src="./images/slide-3.png" alt="">
            </div>
            <a href="">Read More</a>
        </div>
        <!-- 大圆圈 -->
        <div class="circle">
            <div>
                <p>BUSINESS STRATEGY</p>
            </div>
            <div>
                <p>MARKETING RESEARCH</p>
            </div>
            <div>
                <p>FINANCIAL & BANKING</p>
            </div>
        </div>
        <!-- 中间文章-top -->
        <div class="article-top">
            <aside class="title">
                <h2>Our experience is the base for your innovations.</h2>
            </aside>
            <aside class="content">
                <div>
                    <span>A.</span>
                    <p>
                        Vivamus hendrerit mauris ut dui gravida ut cicerra lectus tincidunt cras mattis.

                        <a href="">READ MORE</a>
                    </p>
                </div>
                <div>
                    <span>B.</span>
                    <p>
                        Cras mattis tempor eros nec tristique sed sed felis arcu vel vehicula augue.
                        <a href="">READ MORE</a>
                    </p>
                </div>
                <div>
                    <span>C.</span>
                    <p>
                        Sed sed felis arcu,vel vehicula maecenas fusce tincidunt.
                        <a href="">READ MORE</a>
                    </p>
                </div>
                <div>
                    <span>D.</span>
                    <p>
                        Cras mattis tempor eros nec tristique, Sed sed felis arcu,vel vehicula augue. Maecenas faucibus
                        cursus.Fusce tincidunt telius eget tristique.cursus.
                        <a href="">READ MORE</a>
                    </p>
                </div>
            </aside>
        </div>
        <div class="article-bottom">
            <aside class="left">
                <div class="left-top">
                    <h1>Welcome to our company!</h1>
                    <p><a href="">Click here</a> for more info about this free website templates created by TemplateMonster.com.This websi tetemplate is optimized for 1280X1024 screen resolution.It is als0 XHTML & CSS valid. Vivamus hendrerit mauris ut dui gravida ut viverra lectus tincidunt Cras mattis tempor eros nec tristique.</p>
                </div>
                <div class="left-down">
                    <div>
                        <img src="./images/page1-img1.jpg" alt="">
                        <h2>Sara Green</h2>
                        <p>MANAGER</p>
                    </div>
                    <div>
                        <img src="./images/page1-img2.jpg" alt="">
                        <h2>Thom Smith</h2>
                        <p>MARKETOLOG</p>
                    </div>
                    <div>
                        <img src="./images/page1-img3.jpg" alt="">
                        <h2>April Black</h2>
                        <p>MANAGER</p>
                    </div>
                </div>
            </aside>
            <aside class="right">
                <div class="right-top">
                    <h1>Latest news:</h1>
                    <h4>NOV. <span>25</span>.2012</h4>
                    <p>The PSDSource files ofthis <a href="">Point</a> templateb are available for free for the registered members of TemplateMonster.com.Feel free to get them!</p>
                </div>
                <div class="right-down">
                    <h4>NOV.<span>20</span>.2012</h4>
                    <p>This website template has several pages; Home,About Services, Froducts, Contacts (note that contact us form-doesn'twork)</p>
                    <a href="">READ MORE</a>
                </div>
            </aside>
        </div>
        <div class="content">
            <div>
                <h2>Services:</h2>
                <ul>
                    <li> <a href=""><img src="./images/list-1-marker.gif" alt="">MATTIS TEMPOR EROS NEC</a></li>
                    <li> <a href=""><img src="./images/list-1-marker.gif" alt="">TRISTIQUE SED SED FELS</a></li>
                    <li> <a href=""><img src="./images/list-1-marker.gif" alt="">ARCU VEL VEHICULAAUGUE</a></li>
                    <li> <a href=""><img src="./images/list-1-marker.gif" alt="">MAECENAS FAUCIBUS</a></li>
                </ul>
            </div>
            <div>
                <h2>Services:</h2>
                <ul>
                    <li> <a href=""><img src="./images/list-1-marker.gif" alt="">MATTIS TEMPOR EROS NEC</a></li>
                    <li> <a href=""><img src="./images/list-1-marker.gif" alt="">TRISTIQUE SED SED FELS</a></li>
                    <li> <a href=""><img src="./images/list-1-marker.gif" alt="">ARCU VEL VEHICULAAUGUE</a></li>
                    <li> <a href=""><img src="./images/list-1-marker.gif" alt="">MAECENAS FAUCIBUS</a></li>
                </ul>
            </div>
            <div>
                <h2>Services:</h2>
                <ul>
                    <li> <a href=""><img src="./images/list-1-marker.gif" alt="">MATTIS TEMPOR EROS NEC</a></li>
                    <li> <a href=""><img src="./images/list-1-marker.gif" alt="">TRISTIQUE SED SED FELS</a></li>
                    <li> <a href=""><img src="./images/list-1-marker.gif" alt="">ARCU VEL VEHICULAAUGUE</a></li>
                    <li> <a href=""><img src="./images/list-1-marker.gif" alt="">MAECENAS FAUCIBUS</a></li>
                </ul>
            </div>
            <div class="content-end">
                <h2>Latest news:</h2>
                <p>
                    << Meamus hendrerit mauris ut dul gravida ut wiverra leclus tncidunt Cras malis lempor eros nectislique. Sed ssd felis arcu, well wehiculla augue.>>
                </p>
                <h1>April Black <span>( MANAGER )</span> </h1>
            </div>
        </div>
    </main>
    <footer>
        <div><span>@ 2012</span>
            <img src="./images/footer-logo.png" alt="">
            <p>website Template designed by <a href="">templateMonster.com</a></p>
        </div>
        <div>
            <img src="./images/social-link-1.jpg" alt="">
            <img src="./images/social-link-2.jpg" alt="">
            <img src="./images/social-link-3.jpg" alt="">
        </div>
    </footer>
</body>
</html>